<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>企业营收大数据可视化平台</title>
    <link rel="stylesheet" href="./assets/css/reset.css" />
  </head>
  <body>
    <!-- <div class="test"></div> -->

    <!-- 头 -->
    <header>
      <h1>企业营收大数据统计</h1>
      <span>2022年6月4日11时20分53秒</span>
    </header>
    <!-- 头 -->

    <!-- 内容 -->
    <section class="main">
      <div class="column">
        <div class="alltitle">标题样式</div>
        <div class="box box-left1" style="height: 4rem"></div>
        <div class="alltitle">标题样式</div>
        <div class="box box-left2" style="height: 2.6rem">
          <div class="navboxall" style="height: calc(100% - 30px);">
            <div class="wraptit">
                <span>单号</span><span>金额</span><span>品名</span><span>时间</span>
            </div>
            <div class="wrap">
                <ul>
                    <li>
                        <p>
                            <span>1000210</span><span>199</span><span>手机</span><span>18小时</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <span>1000211</span><span>199</span><span>手机</span><span>18小时</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <span>1000212</span><span>199</span><span>手机</span><span>18小时</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <span>1000213</span><span>199</span><span>手机</span><span>18小时</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <span>1000214</span><span>199</span><span>手机</span><span>18小时</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <span>1000215</span><span>199</span><span>手机</span><span>18小时</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <span>1000216</span><span>199</span><span>手机</span><span>18小时</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <span>1000217</span><span>199</span><span>手机</span><span>18小时</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <span>1000218</span><span>199</span><span>手机</span><span>18小时</span>
                        </p>
                    </li>
                </ul>
            </div>
          </div>
        </div>
        <div class="alltitle">标题样式</div>
        <div class="box box-left3" style="height: 2.6rem"></div>
      </div>

      <div class="column">
        <div class="alltitle">标题样式</div>
        <div class="box box-center1" style="height: 2.3rem">
          <div class="box-center1-left">
            <div style="width: 4.56rem; font-size: .24rem /* 24/100 */;color: #fff;padding-top: .14rem /* 14/100 */;text-indent: 0.1rem;">
                总体情况
                <span style="font-size: .18rem /* 18/100 */;padding-left: .1rem /* 10/100 */;color: #fff;">单位(元)</span>
            </div>
            <div class="text"
                style="color: #fef000;font-size: .8rem /* 80/100 */;font-family: arial;border-top: .01rem /* 1/100 */ solid rgba(255,255,255,.1);padding: .1rem /* 10/100 */ 0;margin: .18rem /* 18/100 */ 0;font-weight: bold;letter-spacing: .02rem /* 2/100 */;">
                1938247
            </div>
          </div>
          <div class="box-center1-right" style="display: flex;">
              <div>
                  <span style="padding-top: .2rem;display: block;text-align: center; color: #fff;font-size: .16rem /* 16/100 */;">标题样式</span>
                  <div class="c1 " style="width: 1.2rem; height: 2rem;"></div>
              </div>
              <div>
                  <span style="padding-top: .2rem;display: block;text-align: center; color: #fff;font-size: .16rem /* 16/100 */;">标题样式</span>
                  <div class="c2 " style="width: 1.2rem; height: 2rem;"></div>
              </div>
              <div>
                  <span style="padding-top: .2rem;display: block;text-align: center; color: #fff;font-size: .16rem /* 16/100 */;">标题样式</span>
                  <div class="c3 " style="width: 1.2rem; height: 2rem;"></div>
              </div>
          </div>
        </div>

        <div class="alltitle">标题样式</div>
        <div class="box box-center2" style="height: 3.5rem"></div>
        <div class="alltitle">标题样式</div>
        <div class="box box-center3" style="height: 3.4rem"></div>
      </div>

      <div class="column">
        <div class="alltitle">标题样式</div>
        <div class="box box-right1" style="height: 3rem">
          <div class="navboxall" style=" height: calc(100% - .3rem /* 30/100 */);padding: 0.1rem; ">
            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <th scope="col">排名</th>
                        <th scope="col">公司</th>
                        <th scope="col">数量</th>
                        <th scope="col">增长率</th>
                    </tr>
                    <tr>
                        <td><span>1</span></td>
                        <td>腾讯科技</td>
                        <td>114万<br /></td>
                        <td>100%<br /></td>
                    </tr>
                    <tr>
                        <td><span>2</span></td>
                        <td>百度公司</td>
                        <td>923823万</td>
                        <td>21%</td>
                    </tr>
                    <tr>
                        <td><span>3</span></td>
                        <td>新浪</td>
                        <td>1240253万</td>
                        <td>12%</td>
                    </tr>
                    <tr>
                        <td><span>4</span></td>
                        <td>网易</td>
                        <td>1.2亿</td>
                        <td>39%</td>
                    </tr>
                    <tr>
                        <td><span>5</span></td>
                        <td>雅虎</td>
                        <td>13423万</td>
                        <td>9%</td>
                    </tr>
                </tbody>
            </table>
          </div>
        </div>

        <div class="alltitle">标题样式</div>
        <div class="box box-right2" style="height: 3rem">
          <div class="navboxall" style=" height: calc(100% - .3rem /* 30/100 */);padding: 0.1rem; ">
            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <th scope="col">排名</th>
                        <th scope="col">公司</th>
                        <th scope="col">数量</th>
                        <th scope="col">增长率</th>
                    </tr>
                    <tr>
                        <td><span>1</span></td>
                        <td>腾讯科技</td>
                        <td>114万<br /></td>
                        <td>100%<br /></td>
                    </tr>
                    <tr>
                        <td><span>2</span></td>
                        <td>百度公司</td>
                        <td>923823万</td>
                        <td>21%</td>
                    </tr>
                    <tr>
                        <td><span>3</span></td>
                        <td>新浪</td>
                        <td>1240253万</td>
                        <td>12%</td>
                    </tr>
                    <tr>
                        <td><span>4</span></td>
                        <td>网易</td>
                        <td>1.2亿</td>
                        <td>39%</td>
                    </tr>
                    <tr>
                        <td><span>5</span></td>
                        <td>雅虎</td>
                        <td>13423万</td>
                        <td>9%</td>
                    </tr>
                </tbody>
            </table>
          </div>
        </div>

        <div class="alltitle">标题样式</div>
        <div class="box box-right3" style="height: 3.2rem"></div>
      </div>
    </section>
    <!-- 内容 -->

    <script src="./assets/js/flexible.js"></script>
    <script src="http://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
    <script src="https://unpkg.com/echarts"></script>
    <script src="./assets/js/left1.js"></script>
    <script src="./assets/js/left3.js"></script>
    <script src="./assets/js/center1.js"></script>
    <script src="./assets/js/center2.js"></script>
    <script src="./assets/js/center3.js"></script>
    <script src="./assets/js/right3.js"></script>
    <script>
      setInterval(() => {
        $("header span").html(wofDate.format("Y年m月d日H时i分s秒"));
      }, 1000);

      // 无缝滚动//定时器
      let num = 0;
        setInterval(function () {
            num--;
            if (num <= -36) {
                num = 0;
            }
            var ulobj = document.querySelector(".wrap  ul");
            ulobj.style.marginTop = num + "px";
        }, 30);
    </script>
  </body>
</html>
